Lists Guidelines 列表指導規則

Usage 用法

列表就是把文字和圖片按從上到下的順序排列。每個列表項佔一行，這樣的設計讓內容更容易閱讀。每一行都可以包含圖示和文字，用來顯示主要內容和附加資訊。

使用列表來傳達或選擇離散專案，例如從一組顏色中進行選擇。

列表應該方便使用者快速瀏覽。為了實現這一點，我們應該讓列表項的各個部分（比如圖示和文字）都整齊排列。當所有視覺元素和文字都保持在固定位置時，使用者就能更輕鬆地瀏覽列表的內容。

1 示例列表 2 行內容的放置位置 3輔助視覺元素保持對齊以便於瀏覽 4 主要文字保持對齊以便於瀏覽

單雙三行的列表

Anatomy 結構

1. Leading media (image or video) 2. Container 3. Headline 4. Supporting text 5. Trailing supporting text 6. Leading icon  7. Trailing icon (or icon button) 8. Leading avatar label text  9. Trailing selection control (checkbox, radio button, handle, etc)  10. Leading avatar container  11. Divider (optional)

Container 容器

1. List container

Headline and supporting text標題和輔助文字

標題文字通常傳達列表項的主題，例如相簿或文章的名稱。.輔助文字包括正文內容，例如文章摘要或餐廳介紹。

1. Headline and supporting text
  1. 1. Headline and supporting text

Leading icon  前置圖示 & Trailing icon  尾部圖示

Leading media or avatar 前導媒體或頭像

列表項可以包含圖片、影片或頭像。將視覺元素固定在列表的前導邊緣，以確保可掃描性。

Image：列表項可以包含照片、插圖和其他圖形。

Video：列表項可以包含照片、插畫和其他圖形，如天氣圖示。

✓ 將視覺元素錨定在行前提升可掃描性
× 避免將輔助視覺元素至於行後中心，會使得關係變亂

Avatar  頭像

列表項可以包含圓形裁剪的影象，以代表一個人或實體

Trailing supporting text 尾部輔助文字

尾部輔助文字可以與行內輔助文字一起使用，以傳達有關列表項的元資訊，例如價格、內容數量或其他詳細資訊。

Selection controls 選擇控制元件

控制元件顯示列表項的資訊和操作。它們可以對齊到列表項的前導或尾隨邊緣。

Checkbox  核取方塊：可用於選擇一個或多個列表項。

Switch  開關：可用於切換控制的開啟或關閉。

Handle  手柄：通常在編輯模式下出現，手柄允許您拖動列表項，將它們移動到列表中的其他位置。此重新排序圖示是列表項的次要操作。

1. Checkboxes 2. Switches 3. Handles

Dividers 分隔線

分隔線可用於分隔較大的列表項。

✓ 在內容較多的行之間放置分割線，入兩行三行的列表
× 透過保持列表項之間的足夠空間來區分行

Responsive layout 響應式佈局

Spacing 間距

使用間距來吸引注意力到列表項中最重要的部分，通常是主要操作區域或關鍵內容。

主要操作佔大部分空間：1 主要操作區 2次要操作區
1 更具區分性的內容（左）2 區分度低的內容（右）

Line length 行長度

當頁面上有大量文字時，注意不要讓每行文字太長。如果頁面變寬了，要記得調整頁邊空白和文字排版，讓閱讀體驗更好。

調整邊距，已建立更舒服的閱讀長度

理想的文字行長度通常在 40 到 60 個字元之間，但大螢幕裝置每行可容納多達 120 個字元。如果一行文字接近 120 個字元，考慮增加行高以提高可讀性。

× 在縮放元件時，若不調整螢幕上其他受影響區域(如文字長度)，可能導致行長度不適宜，影響閱讀體驗
✓ 多列布局可以幫助分割內容

在緊湊視窗尺寸（如移動裝置）下的三行列表，在擴充套件視窗尺寸（如桌面裝置）下顯示為兩行列表

Component adaptation 元件適配

介面適配主要是透過調整顯示方式來實現的。這包括調整螢幕上內容的大小、排列方式，以及各個元素之間的位置關係。比如說，在手機上顯示的文字列表，可以透過改變邊距、行間距或排列密度，讓它在平板電腦這樣的大螢幕上看起來更合適。

Component swapping 元件替換

在切換列表和卡片的顯示方式時要小心，因為兩種形式都需要能展示不同型別的內容。當螢幕變大時，我們有更多的空間可以靈活地擺放文字和圖片。在中等大小和大螢幕上，我們可以充分利用這些額外空間來更好地展示內容。

Compact window size 緊湊視窗尺寸

在移動裝置等緊湊視窗尺寸下，列表會延伸至邊緣。使用者在全屏檢視之間導航，例如在照片應用中從縮圖列表過渡到全圖檢視。

Medium and expanded window sizes 中等和擴充套件視窗尺寸

中等和擴充套件視窗尺寸，如平板和桌面螢幕，可以在同一檢視中顯示主要和次要內容。例如，將列表與詳細檢視並列顯示。

在更大的視窗尺寸下，列表可能會轉變為圖片列表。

列表還可以在大小縮放時顯示更多或更少的內容。例如，當元件展開時，列表項可以顯示更多內容。

在從緊湊到中等視窗尺寸斷點過渡時，較大螢幕上的列表項(2)可以顯示更多資訊。

  1. 緊湊視窗尺寸下的列表項
  1. 中等視窗尺寸下的列表項

Behavior 行為

Expanding and collapsing 展開和摺疊

點選列表項會使用容器轉換過渡模式將其垂直展開到整個螢幕。

Swiping 滑動

向左或向右滑動列表項可以執行操作。

Dragging 拖拽

可以拖拽專案以重新排序列表。

Indicating selected states with second element 使用第二元素標識所選狀態

列表項不應僅使用顏色來標識選中狀態；除了顏色外，還應包括第二個視覺提示。使用以下之一：

勾號作為主導圖示可以表示選中狀態

Interaction & style 互動與樣式

Touch  觸控

當使用者點選列表項時，會出現觸控漣漪，表示互動反饋。

Cursor 游標

當懸停時，懸停狀態為使用者提供視覺提示，表明該元素是可互動的。

Keyboard and switch 鍵盤和開關

當使用 Tab 鍵時，焦點指示器會出現，為使用者提供視覺提示，表明第一個列表項現在已獲得焦點，可以採取行動。當使用者透過空格鍵或回車鍵與獲得焦點的列表項互動時，將執行相應的操作。

Tab 導航至列表
空格或回車啟用專案